import Vue,{VNode} from 'vue';
import BothScrollArea from '../both-scroll-area';
import {convertCssLength} from '../../../util/common';
/**
 * 文本域
 * @author 唐国雄
 * @date 2021/6/22
 * 属性----------------------
 * v-model			当前值, string
 * :placeholder		占位文本, string
 * :disable			禁用, boolean
 * :readonly		只读, boolean
 * :autosize		自适应高度, boolean
 * :maxlength		最大输入长度, number
 * :rows			行数, Number
 * :height			固定高度时的高度, 或自适应高度时的最小高度, number|string
 * :no-border		没有边框, boolean
 * :auto-focus		自动聚焦, boolean
 * 事件----------------------
 * @input
 * @focus
 * @blur
 */
export default Vue.extend({
	name:'Textarea',
	props:{
		//当前值
		value:{
			type:String,
			required:true,
		},
		//占位文本
		placeholder:String,
		//禁用
		disable:Boolean,
		//只读
		readonly:Boolean,
		//自适应高度
		autosize:Boolean,
		//最大输入长度
		maxlength:Number,
		//行数
		rows:{
			type:Number,
			default:3,
		},
		//固定高度时的高度, 或自适应高度时的最小高度
		height:[Number,String],
		//没有边框
		noBorder:Boolean,
		//自动聚焦
		autoFocus:Boolean,
	},
	data(){
		return {
			//是否聚焦文本域
			focus:false,
			//真实高度
			realHeight:'0' as string|null,
			//外部高度
			outerHeight:0 as number,
			//回车键, 用于计算rows代表的高度(兼容ie)
			enters:'',
		};
	},
	computed:{
		classes():string{
			return 'lexmis-Textarea'+
				(this.focus?' lexmis--focus':'')+
				(this.disable?' lexmis--disable':'')+
				(this.readonly?' lexmis--readonly':'')+
				(this.autosize?' lexmis--autosize':'')+
				(this.noBorder?' lexmis--noBorder':'');
		},
		//固定高度时的高度, 或自适应高度时的最小高度(考虑rows属性)
		fixedOuterHeight():string{
			return this.height?convertCssLength(this.height):this.outerHeight+this.extraHeight+'px';
		},
		//边框等额外高度
		extraHeight(){
			return this.noBorder?0:2;
		},
	},
	mounted(){
		//计算最小高度
		this.$watch('rows',this.$_lexmis_minHeight,{immediate:true});
		//计算真实高度
		this.$watch('value',this.$_lexmis_autosize);
		this.$nextTick(function(){
			if(this.autoFocus){
				(this.$refs.textarea as HTMLElement).focus({preventScroll:true});
			}
		});
	},
	activated(){
		if(this.autoFocus){
			(this.$refs.textarea as HTMLElement).focus({preventScroll:true});
		}
	},
	methods:{
		$_lexmis_autosize(){
			this.realHeight=null;
			this.$nextTick(function(){
				this.realHeight=(this.$refs.textarea as Element).scrollHeight+'px';
			});
		},
		$_lexmis_minHeight(rows:number){
			this.outerHeight=0;
			this.realHeight=null;
			let enters=' ';
			while(--rows>0){
				enters+='\n';
			}
			this.enters=enters;
			this.$nextTick(function(){
				this.outerHeight=(this.$refs.textarea as Element).scrollHeight;
				this.enters='';
				this.$_lexmis_autosize();
			});
		},
	},
	render(h):VNode{
		const content=[
			h('textarea',{
				ref:'textarea',
				staticClass:'lexmis_textarea',
				staticStyle:{
					height:this.realHeight,
					minHeight:`calc(${this.fixedOuterHeight} - ${this.extraHeight}px)`,
				},
				attrs:{
					maxlength:this.maxlength,
					readonly:this.readonly,
					rows:1
				},
				domProps:{
					value:this.enters||this.value,
					placeholder:this.placeholder,
					disabled:this.disable,
				},
				on:{
					input:(e:InputEvent) => {
						const inputVal=(e.target as HTMLInputElement).value;
						if(this.value!==inputVal){
							this.$emit('input',inputVal);
						}
					},
					focus:() => {
						this.focus=true;
						this.$emit('focus');
					},
					blur:() => {
						this.focus=false;
						this.$emit('blur');
					},
					compositionend:(e:CompositionEvent) => {
						(this.$refs.textarea as HTMLElement).blur();
						this.$nextTick(() => {
							(this.$refs.textarea as HTMLElement).focus();
						});
					}
				}
			})
		];
		if(this.autosize){
			return h('div',{
				staticClass:this.classes,
			},content);
		}else{
			return h(BothScrollArea,{
				staticClass:this.classes,
				staticStyle:{
					height:this.fixedOuterHeight,
				},
				props:{
					fullWidth:true,
				}
			},content);
		}
	},
});
